<!--这个是主页中具体某一个商品的模块-->
<template>
  <div class="goods-item" @click="clickdetail">
    <img v-lazy="goodimg"  @load="overimg" />
    <div class="goods-info">
      <p>{{goodsitem.title}}</p>
      <span class="price">{{Prices}}</span>
      <span class="collect">{{goodsitem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodslistitem",
  data() {
    return {
      iid: "",
      shop_id: ""
    };
  },
  computed: {
    goodimg() {
      console.log();
      if (this.goodsitem.show == undefined) {
        return this.goodsitem.image;
      } else {
        return this.goodsitem.show.img;
      }
    },
    Prices() {
      console.log();
      if (this.goodsitem.orgPrice == undefined) {
        return this.goodsitem.discountPrice;
      } else {
        return this.goodsitem.orgPrice;
      }
    }
  },
  props: {
    goodsitem: {
      type: Object,
      default: {}
    }
  },
  methods: {
    overimg() {
      //这个方法就是监听图片是否加载完成
      //console.log("我已经加载完成")
//通过路由来判断，如果是主页的陆游的话就发送的是主页的事件
//如果是detail的话就发送detail的事件
      if (this.$route.path.indexOf("/home")) {
        this.$bus.$emit("homeoverimg");
      } else if (this.$route.path.indexOf("/detail")) {
        this.$bus.$emit("detailoverimg");
      }
      // console.log(this.$bus)
    },
    clickdetail() {
      //这里就是点击商品获得id进行传递到详情页

      //把查询出来的iid赋值给新的变量，然后传到浏览器的请求上

      if (isNaN(this.goodsitem.item_id)) {
        this.iid = this.goodsitem.iid;
        this.$router.push("/detail" + this.iid);
      }
      if (this.goodsitem.shop_id) {
        console.log(this.goodsitem);
        this.$router.push("/detail" + this.goodsitem.shop_id);
      }
    }
  }
};
</script>

<style scoped>
.goods-item {
  padding-bottom: 40px;
  position: relative;

  width: 46%;
}

.goods-item img {
  width: 100%;
  border-radius: 5px;
}

.goods-info {
  font-size: 12px;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}

.goods-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}

.goods-info .price {
  color: var(--color-high-text);
  margin-right: 20px;
}

.goods-info .collect {
  position: relative;
}

.goods-info .collect::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -1px;
  width: 14px;
  height: 14px;
  background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
}
</style>